detect-passive-events

What is detect-passive-events?

The detect-passive-events npm package is a utility that helps developers determine if the browser supports passive event listeners. Passive event listeners can improve scrolling performance by letting the browser know that the event listener will not call preventDefault(), allowing the browser to optimize scrolling performance.

What are detect-passive-events's main functionalities?

Detect Passive Event Support

This feature allows you to check if the browser supports passive event listeners. The code sample demonstrates how to use the detect-passive-events package to log whether passive event listeners are supported.

const detectPassiveEvents = require('detect-passive-events');

if (detectPassiveEvents.hasSupport) {
  console.log('Passive event listeners are supported.');
} else {
  console.log('Passive event listeners are not supported.');
}

Other packages similar to detect-passive-events

detect-it

The detect-it package provides a broader range of detection capabilities, including touch support, pointer events, and passive event listeners. It offers a more comprehensive solution for detecting various input capabilities and event listener support compared to detect-passive-events.

modernizr

Modernizr is a well-known feature detection library that can detect a wide range of HTML5 and CSS3 features, including passive event listener support. It is more extensive and can be used to detect many other features beyond just passive event listeners.

README

Detect Passive Events

Detect if the browser supports passive event listeners.

Live detection test

Exports a reference to a singleton object (a micro state machine with an update function) with its state set to if the browser supports passive event listeners, as well as an update() function which re-runs the tests and updates the object's state.

Note that the code used in the detection is adapted from this Passive Events Explainer.

detectPassiveEvents micro state machine

const detectPassiveEvents = {
  hasSupport: boolean,

  // re-run the detection tests and update state
  update() {...},
}

Installing detect-passive-events

$ npm install detect-passive-events

Using detect-passive-events

import detectPassiveEvents from 'detect-passive-events';

// passive events are supported by the browser
if (detectPassiveEvents.hasSupport === true) {
  // set listeners like this
  document.addEventListener('scroll', handleScroll, { capture: false, passive: true });
}

// passive events are not supported by the browser
if (detectPassiveEvents.hasSupport === false) {
  // set listeners like this
  document.addEventListener('scroll', handleScroll, false);
}

// updating the state - most apps won't need to use this at all
detectPassiveEvents.update();

Note that the update() function is run once at the time of import to set the object's initial state, and generally doesn't need to be run again. If it doesn't have access to the window, then the state will be undefined (detect-passive-events will not throw an error), and you will need to call the update() function manually at a later time to update its state.

Part of the detect-it family

• detect-it
  • detect-hover
  • detect-pointer
  • detect-touch-events
  • detect-passive-events